<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>

  <body>
    <div id="app">
      <h1>插值表达式</h1>
      <h3>{{msg}}</h3>
      <h3>{{count}}</h3>
      <h1>v-text</h1>
      <div v-text="msg"></div>
      <h1>v-model</h1>
      <input type="text" v-model="msg" />
      <input type="text" v-model="count" />
      <div v-html="html"></div>
      <button v-on="clickHandler">点击按钮</button>
      <div v-for="item in list">
        <p>{{item}}</p>
      </div>
    </div>
    <script type="text/javascript" src="Vue/dep.js"></script>
    <script type="text/javascript" src="Vue/watcher.js"></script>
    <script type="text/javascript" src="Vue/index.js"></script>
    <script type="text/javascript" src="Vue/observer.js"></script>
    <script type="text/javascript" src="Vue/compiler.js"></script>
    <script type="text/javascript">
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'zhang san',
          count: 10,
          person: {
            name: 'li si'
          },
          html: '<p>这是一个p标签</p>',
          list: [1, 2, 3, 4, 5, 6]
        },
        methods: {
          clickHandler() {
            console.log('clickHandler')
          }
        }
      })
      console.log(vm.msg)
      // vm.msg = { age: 18 };
      console.log(vm)
      setTimeout(() => {
        vm.html = '南方罚款'
      }, 2000)
    </script>
  </body>
</html>
